<template>
    <div>
      
        <!-- 列表 -->
        <ul>
            <router-link v-for="item in list" :key="item.id" :to="'/home/newInfo/' + item.id " tag="li">
                <img :src="item.img" alt="">
                <div class="detail">
                    <p>{{item.title}}</p>
                    <p><span>发表时间:{{item.time}}</span><span>点击次数:{{item.number}}次</span></p>
                </div>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[
            {id:1,img:require('../../images/8.jpg'),time:'2015--3-6',title:'标题1',number:'10'},
            {id:2,img:require('../../images/55st.png'),time:'2016--7-6',title:'标题2',number:'20'},
            {id:3,img:require('../../images/106st.png'),time:'2017--4-23',title:'标题3',number:'40'}
            ]

        }
    }
}
</script>
<style scoped>
ul{
    padding: 10px;
    margin: 0;
    list-style: none;
}
li{
    display: flex;
    background-color: #fff;
    margin-bottom: 10px;
    box-shadow: 0 0 10px #ccc;
}
li img{
    width: 20%;
    height: 20%;
}
.detail{
    margin-left: 10px;
}

</style>


